<template>
    <div>
      <Form :model="bdSearchForm" inline :label-width="60" class="search-form">
        <Form-item label="手机号码" prop="mobile" style="width:210px;display: inline;">
          <Input type="text" v-model="bdSearchForm.mobile" placeholder="请输入手机号" clearable style="width: 150px" />
        </Form-item>
        <Form-item label="姓名" prop="name" style="width:210px;display: inline;">
          <Input type="text" v-model="bdSearchForm.nickName" placeholder="请输入姓名" clearable style="width: 150px" />
        </Form-item>
        <Form-item label="会员类型" prop="name" style="width:210px;display: inline;">
          <Select v-model="bdSearchForm.level" style="width:150px" clearable placeholder="请选择会员类型">
            <Option value="金卡会员">金卡</Option>
            <Option value="银卡会员">银卡</Option>
            <Option value="普卡会员">普卡</Option>
          </Select>
        </Form-item>
        <Form-item label="区域" prop="name">
          <regionArea style="display:flex;" @selected="selectedRegions" :showIs="true"/>
        </Form-item>
        <Button @click="bdhandleSearch" class="search-btn" type="primary" icon="ios-search">搜索</Button>
      </Form>
      <Table @on-selection-change="bdHandleTable" border :columns="bdcolumns" :data="data" :loading="loading"></Table>
    </div>
  </template>
  
  <script>
  import regionArea from "@/views/agent-manage/region";
  import {getTable} from "@/api/sms.js"
  export default {
    components:{regionArea},
    data() {
      return {
        loading:true,
        bdSearchForm: {
          pageNumber:1,
          pageSize:9999999,
          mobile: "",
          nickName: "",
          roleType: "",
          regionId:"",
          level:""
        },
        bdcolumns: [
          {
            type: 'selection',
            width: 60,
            align: 'center',
          },
          {
            title: '姓名',
            key: 'nickName'
          },
          {
            title: '类型',
            key: 'gradeName'
          },
          {
            title: '电话',
            key: 'mobile'
          },
          {
          title: '地区',
          key: 'locationName'
        }
      
        ],
        data: [],
      }
    },
    methods: {
    // 初始化表格
    async initTableList(){
      this.loading=true
      if (this.bdSearchForm.regionId) {
          this.bdSearchForm.regionId = this.bdSearchForm.regionId.toString();
        }
      const res=await getTable(this.bdSearchForm)
      if(res.code!=200) return
      this.loading=false
      this.data=res.result.records
    },
    // 搜索
    bdhandleSearch(){
      this.initTableList()
    },
    selectedRegions(v){
      this.bdSearchForm.regionId = v[0];
    },
    // 勾选
    bdHandleTable(v){
      this.total=v.length
      this.$emit("changeNum",this.total)
      this.$emit("list",v)
    },
    //修改状态
    changeFlag(){
      this.$emit("change",false)
    }
    // //每页的条数
    // orderChangePageSize(v){
    //     this.bdSearchForm.pageNumber = 1;
    //     this.bdSearchForm.pageSize=v,
    //     this.initTableList()
    //   },
    //   //第几页
    //   orderChangePage(v){
    //     this.bdSearchForm.pageNumber=v,
    //     this.initTableList()
    //   }
  },
    mounted(){
      // this.initTableList()
    }
  }
  </script>
  
  <style>
  
  </style>